<template>
	<view class="page_body">
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">退款/售后</text>
		</navBar>
		<!-- 搜索栏 -->
		<view style="background-color: #FFF;">
			<search @searchBlur='searchBlur'
				@nativeInput='nativeInput'
				:isLinks='false'
				bgColor="#F5F5F5">
			</search>
		</view>

		<scroll-view scroll-y
			@scrolltolower="scrolltolower"
			:style="{'height': 'calc(100vh  - ' + demoTopHieght +')'}"
			class="mian_refund pd10">

			<!-- 一条订单记录 -->
			<view v-for="(item,index) in refundList"
				:key="index"
				@click="toDetails(item)"
				class="mian_allOrder_list_item mb10">
				<view class="list_item_top pd_lr10">
					<view class="list_item_top_left">
						申请时间：{{Utils.DateFormateArr(item.createTime)}}
					</view>


					<view v-if="[1].includes(item.status) "
						class="list_item_top_right">
						申请中
					</view>
					<view v-if="[3].includes(item.status)"
						class="list_item_top_right">
						已完成
					</view>
					<view v-if="[4].includes(item.status) "
						class="list_item_top_right">
						申请失败
					</view>

					<view v-if="item.returnType && item.returnType != 2 && [6].includes(item.status) "
						class="list_item_top_right">
						待寄回
					</view>
					<view v-if="item.returnType &&
					 item.returnType == 2 && [2].includes(item.status)"
						class="list_item_top_right">
						待退款
					</view>
					<view v-if="item.returnType &&
					 item.returnType != 2 && item.status == 2"
						class="list_item_top_right">
						寄回中
					</view>
					<view v-if="[5].includes(item.status) "
						class="list_item_top_right">
						已取消申请
					</view>
				</view>
				<!-- 商品信息 -->
				<view v-for="(it,inx) in item.commodityInfo"
					:key="inx"
					class="list_item_conter pd10">
					<view class="list_item_conter_top">
						<view class="list_item_conter_top_img" v-if="updateNoneImg">
							<image
								:src=" it.spuInfo && it.spuInfo.picture ? uploadImgUrl + it.spuInfo.picture : computedMorentu">
							</image>
						</view>
						<view class="list_item_conter_top_text ml5">
							<view class="list_item_conter_top_text_top texttowShow">
								{{it.spuInfo && it.spuInfo.name ? it.spuInfo.name : ''}}
							</view>
							<template v-if="item.type == 1">
								<view v-for="(itCd,inxCd) in it.children"
									:key="inxCd"
									class="list_item_conter_top_text_bom ">
									<view class="list_item_conter_top_text_bom_item mt10">
										<text class="list_item_conter_top_text_bom_item_l">
											{{
											itCd.skuInfo &&
											itCd.skuInfo.unitInfo && 
											itCd.skuInfo.unitInfo.name &&
											itCd.skuInfo.specsOptionInfo && 
											itCd.skuInfo.specsOptionInfo.length ? 
											itCd.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
											'/' +
											itCd.skuInfo.unitInfo.name :
											itCd.skuInfo.unitInfo.name
											
										}}
										</text>
										<text class="list_item_conter_top_text_bom_item_r">
											￥{{itCd.price ? Utils.formatToFixed(itCd.price,'price') : 0}}X{{itCd.qty ? itCd.qty : 0}}
										</text>
									</view>
								</view>
							</template>
							<template v-if="item.type == 2">
								<view class="list_item_conter_top_text_bom ">
									<view class="list_item_conter_top_text_bom_item mt10">
										<text class="list_item_conter_top_text_bom_item_l">
											{{
											it.skuInfo &&
											it.skuInfo.unitInfo && 
											it.skuInfo.unitInfo.name &&
											it.skuInfo.specsOptionInfo && 
											it.skuInfo.specsOptionInfo.length ? 
											it.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
											'/' +
											it.skuInfo.unitInfo.name :
											it.skuInfo.unitInfo.name
											
										}}
										</text>
										<text class="list_item_conter_top_text_bom_item_r">
											￥{{it.price ? Utils.formatToFixed(it.price,'price') : 0}}X{{it.qty ? it.qty : 0}}
										</text>
									</view>
									<!-- 满减 -->
									<view v-if="item.type == 2 && item.activityType == 2"
										class="biaoqian mt10">
										优惠:{{it.preferential ? Utils.formatToFixed(it.preferential,'money') : 0}}元
									</view>
								</view>
							</template>
						</view>
					</view>
					<!-- 活动赠品信息 //订单类型[1：普通订单 2：促销订单] -->
					<template v-if="item.type == 2 && item.activityType == 1 && it.children &&  it.children.length">
						<view v-for="(itc,inxc) in it.children"
							class="list_item_conter_bom mt10">
							<view class="list_item_conter_top_img" v-if="updateNoneImg">
								<image class="zenpin"
									:src="xcxImgUrl && xcxImgUrl+'page_public/static/zengpin.svg'"></image>
								<image
									:src=" itc.spuInfo && itc.spuInfo.picture ? uploadImgUrl + itc.spuInfo.picture : computedMorentu">
								</image>
							</view>
							<view class="list_item_conter_top_text ml5">
								<view class="list_item_conter_top_text_top texttowShow">
									{{itc.spuInfo && itc.spuInfo.name ? itc.spuInfo.name : 0}}
								</view>
								<view class="list_item_conter_top_text_bom ">
									<view class="list_item_conter_top_text_bom_item mt10">
										<text class="list_item_conter_top_text_bom_item_l">
											{{
												itc.skuInfo &&
												itc.skuInfo.unitInfo && 
												itc.skuInfo.unitInfo.name &&
												itc.skuInfo.specsOptionInfo && 
												itc.skuInfo.specsOptionInfo.length ? 
												itc.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
												'/' +
												itc.skuInfo.unitInfo.name :
												itc.skuInfo.unitInfo.name
												
											}}
										</text>
										<text class="list_item_conter_top_text_bom_item_r">
											X{{itc.qty ? itc.qty : 0}}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
				<view class="list_item_bom pd_lr10">
					<view class="">
						共{{ item.type == 1? Utils.formatToFixed(item.qty ,'number') : Utils.formatToFixed(item.totalCount,'number')}}件商品
					</view>
					<view v-if="item.type == 2 && item.activityType == 2"
						class="">
						合计：￥{{item.money ? Utils.formatToFixed(item.money,'money') : 0}}
					</view>
					<view v-else
						class="">
						合计：￥{{item.money ? Utils.formatToFixed(item.money,'money') : 0}}
					</view>
				</view>
				<view class="list_item_btn pd10">
					<view @click.stop="quxiaoShenqing(item)"
						v-if="item.status == 1"
						class="list_item_btn_item list_item_btn_item_active ml5">
						取消申请
					</view>
					<view @click.stop="lijiJijian(item)"
						v-if="item.returnType && item.returnType != 2 && item.status == 6"
						class="list_item_btn_item list_item_btn_item_active ml5">
						立即寄件
					</view>
					<view @click.stop="chakanwuliu(item)"
						v-if="item.returnType &&
					 item.returnType != 2 && item.status == 2"
						class="list_item_btn_item list_item_btn_item_active ml5">
						查看物流
					</view>
				</view>
				<view v-if="item.status == 4"
					class="list_item_bom pd_lr10">
					<view class="">
						失败原因
					</view>
					<view class="">
						{{item.checkExplain || `-`}}
					</view>
				</view>
				<view v-if="item.status == 3"
					class="list_item_bom pd_lr10">
					<view class="" v-if="item.returnType == 2">
						退款成功
					</view>
					<view class="" v-if="item.returnType == 1">
						退货成功
					</view>
					<view class="" v-if="item.returnType == 3">
						退款退货成功
					</view>
					<view class="" v-if="item.returnType !== 1">
						已退回：{{item.money ? Utils.formatToFixed(item.money,'money') : 0}}元
					</view>
				</view>
				<view v-if="item.status == 2"
					class="list_item_bom pd_lr10">
					<view class="">
						快递单号
					</view>
					<view class="">
						{{item.deliveryNumber ? item.deliveryNumber : ''}}
					</view>
				</view>
			</view>

		</scroll-view>

		<!-- 模态框确认 -->
		<u-modal :show="modalShow"
			:title="modalInfo.title"
			showConfirmButton
			showCancelButton
			@confirm='modalConfirm'
			@cancel='modalShow = false'
			:content='modalInfo.content'>

		</u-modal>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		listMallOrderReturnPageInfo,
		closeMallOrderReturn
	} from "@/api/global.js"
	import {
		uploadImgUrl
	} from '@/utils/request.js'
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
			computedMorentu() {
				return this.$store?.state?.morentu
			},
			//返回有图无图控制
			updateNoneImg() {
				return this.$store.state.configSetting.noneImge == 1 ? false : true
			},
		},
		data() {
			return {
				totalCount: '', //共多少件
				uploadImgUrl,
				pageData: {
					currentPage: 1,
					pgeSize: 10
				},
				searchParams: {
					sort: 2,
					status: '', //状态[1：待审核 2：待收货 3：已完成 4：已作废 5：关闭]
					apiSearch: ''
				},
				refundList: [],
				lastPage: 0,
				modalShow: false, //模态框
				modalInfo: { //模态框提示对象内容
					title: '温馨提示',
					content: ''
				},
				returnId: '', //退货id
				modalType: 0, //区分模态确认后点击事件
				timer: null
			};
		},
		onShow() {
			this.$nextTick(() => {
				//获取高度
				this.Utils.getDemoTopHeight('mian_refund')
			})
			this.pageData.currentPage = 1;
			this.getList();
		},
		onLoad() {
			this.getList()
		},
		methods: {
			//去详情
			toDetails(item) {
				//保存商品信息
				this.$store.commit('updateCommonityItem', item)
				uni.navigateTo({
					url: `/page_public/refundDetails?returnId=${item.returnId}`
				})
			},

			//立即寄件
			lijiJijian(item) {
				uni.navigateTo({
					url: `/page_public/mailingAddress?returnId=${item.returnId}`
				})
			},
			//查看物流
			chakanwuliu(item) {
				uni.navigateTo({
					url: `/page_public/logisticsDetails?id=${item.returnId}&route=refund`
				})
			},
			//取消申请
			quxiaoShenqing(item) {
				this.modalShow = true
				this.modalInfo.content = '是否取消申请当前售后信息？？？'
				this.returnId = item?.returnId || ''
				this.modalType = 1 //取消申请
			},
			//模态确定
			async modalConfirm() {
				if (this.modalType == 1) { //取消申请操作
					let res = await closeMallOrderReturn({
						returnId: this.returnId
					})
					if (res.code == 2000) {
						this.Utils.toast(`取消成功`)
						this.modalShow = false
						this.pageData.currentPage = 1
						this.refundList = []
						this.getList()
					} else {
						this.Utils.toast(`${res.msg}`)
					}
				}


			},
			//获取退货列表
			async getList() {
				uni.showLoading()
				let res = await listMallOrderReturnPageInfo({
					...this.searchParams,
					...this.pageData
				})
				if (res.code == 2000) {
					uni.hideLoading()
					let list = res?.data?.info?.list || []

					if (list.length > 0) {
						list.forEach(item => {
							let qtyArr =   []
							item.commodityInfo.map(it => {
								qtyArr.push(it.qty)
								if (item.type == 2 && it.children && it.children.length > 0) {
									 it.children.map(ch => qtyArr.push(ch.qty))
								}
								
							})
							// qtyArr.push(item.qty)
							const totalCount = qtyArr.reduce(((prev, next) => prev + next), 0)
							item.totalCount = totalCount
							return item
						})
					}
					if (this.pageData.currentPage == 1) {
						this.refundList = list
					} else {
						this.refundList = this.refundList.concat(list)
					}
					console.log(this.refundList, '加上数量');
				} else {
					this.Utils.toast(`${res.msg}`)
				}
			},
			//下拉加载
			scrolltolower() {
				this.pageData.currentPage++
				if (this.pageData.currentPage > this.lastPage) {
					return
				} else {
					this.getList()
				}
			},
			//输入框点击搜素
			searchBlur(val) {
				console.log(val);
				this.searchParams.apiSearch = val
				this.pageData.currentPage = 1
				this.refundList = []
				this.getList()
			},
			nativeInput(e) {
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.searchParams.apiSearch = e;
					this.pageData.currentPage = 1;
					this.refundList = [];
					this.getList();
				}, 1000)
			},
			//返回上一级
			navToBack() {
				uni.switchTab({
					url: '/pages/myde/myde'
				})
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	/deep/.u-modal__button-group__wrapper--confirm.u-modal__button-group__wrapper--confirm {
		background-color: #ec4141;

		.u-modal__button-group__wrapper__text {
			color: #FFF !important;
		}
	}

	.mian_refund {
		width: 100%;
		box-sizing: border-box;

		.mian_allOrder_list_item {
			background-color: #FFF;
			width: 100%;
			border-radius: $border_radius_10;

			.list_item_top {
				height: 88rpx;
				border-bottom: 1px solid #f3f3f3;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $text_color_333;

				.list_item_top_left {
					font-size: $font_size_12;
				}

				.list_item_top_right {
					font-size: $font_size_14;
				}
			}

			.list_item_conter {
				border-bottom: 1px solid #f3f3f3;

				.list_item_conter_top,
				.list_item_conter_bom {
					display: flex;

					.list_item_conter_top_img {
						position: relative;
						border-radius: $border_radius_4;
						width: 160rpx;
						height: 160rpx;

						.zenpin {
							position: absolute;
							left: 0;
							top: 0;
							z-index: 999;
							width: 80rpx;
							height: 32rpx;
						}

						image {
							width: 100%;
							height: 100%;
						}
					}

					.list_item_conter_top_text {
						flex: 1;

						.list_item_conter_top_text_top {
							font-size: $font_size_12;
							color: $text_color_333;
						}

						.list_item_conter_top_text_bom {
							.list_item_conter_top_text_bom_item {
								font-size: $font_size_12;
								display: flex;
								justify-content: space-between;

								.list_item_conter_top_text_bom_item_l {
									width: 324rpx;
									color: $text_color_808080;
								}

								.list_item_conter_top_text_bom_item_r {
									color: $text_color_333;
								}
							}

							.biaoqian {
								font-size: $font_size_12;
								color: $text_color_ec4141;
								padding: 4rpx;
								background-color: rgba(255, 227, 227, 1);
								width: 150rpx;
								max-width: 300rpx;
								border-radius: $border_radius_4;
								text-align: center;
								float: right;
							}
						}
					}
				}

				.list_item_conter_bom {
					margin-left: 100rpx;
				}
			}

			.list_item_bom {
				display: flex;
				height: 80rpx;
				align-items: center;
				justify-content: space-between;
				color: $text_color_333;
				font-size: $font_size_12;
			}

			.list_item_btn {
				display: flex;
				justify-content: flex-end;

				.list_item_btn_item {
					font-size: $font_size_14;
					color: $text_color_333;
					border: 1px solid rgba(230, 230, 230, 1);
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: $border_radius_4;

				}

				.list_item_btn_item_active {
					color: $text_color_ec4141;
					border: 1px solid $text_color_ec4141;
				}
			}
		}
	}
</style>